<template>
	<view class="cloumCenter w100">
		<appBar title="人员信息" :rightText="this.isEdit ? '修改' : '取消修改'" :showRight="true" @rightClick="changeInfo"></appBar>
		<auditStatusVue :status="'0'" />
		<view class="cardContiner w100 borderRadiusnone" v-for="[key, item] in Object.entries(personSetting)" :key="key">
			<view class="ps20" style="gap: 20rpx">
				<view class="titleH2 fontWeight" style="color: #000">
					{{ item.title }}
				</view>
				<form-info v-if="isEdit" :formInfo="formInfo[key]" :readonly="isEdit" :options="item.option"></form-info>
				<form-component v-else :formInfo="formInfo[key]" :ref="'formChildren' + key" :options="item.option" :readonly="isEdit" />
			</view>
		</view>
		<view style="width: 90%" class="mtb20" v-if="!isEdit">
			<ThemeButton color="linear-gradient(300deg, #fd5f47 0%, #f9773d 100%)" text="提交" @click="submit" />
		</view>
	</view>
</template>

<script>
import FormComponent from '@/components/FormComponent/FormComponent.vue';
import FormInfo from '@/components/FormInfo/FormInfo.vue';
import { appSetting } from '@/common/addPersonSetting';
import { appData } from '@/common/appData';
import { onLoad } from '@dcloudio/uni-app';
import { getAgencyUserApi } from '@/api/agentApi/user.js';

export default {
	components: {
		FormComponent,
		FormInfo
	},
	data() {
		return {
			personSetting: appSetting.personSetting, //动态表单模板
			formInfo: appData.person,
			isEdit: true
		};
	},
	mounted() {
		const fieldTranslations = this.extractTitles(this.personSetting);
	},
	onLoad(option) {
		this.getAgencyUser(option.id);
	},
	methods: {
		changeInfo() {
			this.isEdit = !this.isEdit;
		},

		// 获取人员信息
		async getAgencyUser(id) {
			let res = await getAgencyUserApi(id);
			this.updateAppData(this.formInfo, res.data);
		},
		// 处理人员信息格式
		updateAppData(appData, data) {
			// 基本信息格式处理
			const informationFields = ['account', 'password', 'name', 'identityNum', 'phone', 'status'];
			informationFields.forEach((field) => {
				this.formInfo.information[field] = data[field];
			});
			// 费率/佣金格式处理
			const commissionFields = ['commission', 'costRate', 'fixedRatio', 'merchant', 'sharing', 'undertaker'];
			commissionFields.forEach((field) => {
				this.formInfo.commission[field] = data[field];
			});

			// 费率结算格式处理
			const rateInfoFields = ['wxRate', 'ysfCappingRate', 'ysfDebitRate', 'ysfFiexdRate', 'ysfLoanRate', 'zfbRate'];
			rateInfoFields.forEach((field) => {
				this.formInfo.commission.rateInfo[field] = data[field];
			});

			// 权限格式处理
			const permissionFields = ['shop', 'mainPass', 'otherPass'];
			permissionFields.forEach((field) => {
				if (field != 'shop') {
					console.log(this.formInfo.permission[field], '=====', data[field]);
					this.formInfo.permission[field] = data[field].split(',');
				} else {
					this.formInfo.permission[field] = data[field];
				}
			});
		},
		submit() {
			let allFormData = {}; // 用来存放所有子组件的数据
			Object.entries(this.personSetting).forEach(([key, field]) => {
				const formChild = this.$refs['formChildren' + key];
				let childModel = formChild && formChild[0] && formChild[0].getModel();
				if (childModel) {
					allFormData[key] = childModel;
				}
			});
			console.log('输出allFormData', allFormData);
		}
	}
};
</script>
